<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    
    
    <title>BOM | Liuqh&#39;blogs | 要有最朴素的生活  最遥远的梦想，即使明日天寒地冻 路远马亡。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="keywords" content="BOM对象">
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/css/style.css?v=1.4.3">
    
    <script type="text/javascript">
        // Data Center
        var DC = {
            reward:	true,
            lv: JSON.parse('{"enable":false,"app_id":null,"app_key":null,"icon":true}'),
            v: JSON.parse('{"enable":false,"appid":null,"appkey":null,"notify":true,"verify":true,"placeholder":"give me some sugers plz...","avatar":"wavatar"}'),
            g: JSON.parse('{"enable":false,"lazy":false,"owner":"liuqinghua0609","repo":"gitment","oauth":{"client_id":null,"client_secret":null},"perPage":10}'),
            d: JSON.parse('{"app_id":null}')
        };
    </script>
    <script type="text/javascript">
        window.lazyScripts=[];
    </script>
    
</head>


<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="">
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap">
      
      <img src="/img/111.jpg" class="brand-bg">
      
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Liuqh</h5>
          <a href="mailto:心随远方 无畏无惧" title="心随远方 无畏无惧" class="mail">
            
              <span>心</span>
            
              <span>随</span>
            
              <span>远</span>
            
              <span>方</span>
            
              <span> </span>
            
              <span>无</span>
            
              <span>畏</span>
            
              <span>无</span>
            
              <span>惧</span>
            
          </a>
        </hgroup>
        
        <ul class="menu-link">
          
              <li>
                <a href="https://blog.csdn.net/qq_41840644" target="_blank">
                  <i class="icon icon-lg icon-heart"></i>
                </a>
              </li>
            
              <li>
                <a href="https://weibo.com/5902408774/profile?rightmod=1&amp;wvr=6&amp;mod=personnumber&amp;is_all=1" target="_blank">
                  <i class="icon icon-lg icon-weibo"></i>
                </a>
              </li>
            
        </ul>
        
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                首页
              </a>
            </li>
        
            <li class="">
              <a href="/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                分类
              </a>
            </li>
        
            <li class="">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="">
              <a href="/custom"  >
                <i class="icon icon-lg icon-music"></i>
                随身听
              </a>
            </li>
        
            <li class="">
              <a href="/about"  >
                <i class="icon icon-lg icon-user"></i>
                我
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row clearfix">
        <a href="javascript:;" class="header-icon pull-left waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">
            <span>BOM</span>
            
        </div>
        
        <a href="javascript:;" id="site_search_btn" class="header-icon pull-right waves-effect waves-circle waves-light">
            <i class="icon icon-lg icon-search"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">
    <img src="/img/banner1.jpg" class="header-bg">
    <div class="container fade-scale">
        <h1 class="title">BOM</h1>
        <h5 class="subtitle">
            
                <time datetime="2019-07-26T12:01:34.000Z" itemprop="datePublished" class="page-time">
  2019-07-26
</time>


	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/BOM/">BOM</a></li></ul>

            
        </h5>
        
    </div>
    

</header>

<div id="site_search">
    <div class="search-title clearfix">
        <span class="pull-left">
          <i class="icon icon-lg icon-search"></i>
        </span>
        <input type="text" id="local-search-input" name="q" results="0" placeholder="search my blog..." class="form-control pull-left"/>
        <a href="javascript:;" class="close pull-right waves-effect waves-circle waves-light">
          <i class="icon icon-lg icon-close"></i>
        </a>
    </div>
    <div id="local-search-result"></div>
</div>


<div class="container body-wrap">
    <article id="post-BOM"
  class="post-article article-type-post" itemprop="blogPost">
    <div class="post-card">
        <h1 class="post-card-title">BOM</h1>
        <div class="post-meta">
            <time class="post-time" title="2019-07-26 20:01:34" datetime="2019-07-26T12:01:34.000Z"  itemprop="datePublished">2019-07-26</time>

            
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/BOM/">BOM</a></li></ul>



            

            


            
        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            
            <h3 id="一、BOM对象包含的内容"><a href="#一、BOM对象包含的内容" class="headerlink" title="一、BOM对象包含的内容"></a>一、BOM对象包含的内容</h3><blockquote>
<p>BOM: Brower Object Model，简称浏览器对象模型</p>
<ul>
<li><strong>window</strong>   JavaScript层级中的顶级对象，表示浏览器窗口</li>
<li><strong>Navigator</strong>  包含了客户端浏览器的信息</li>
<li><strong>History</strong>     包含了浏览器窗口访问过的URL</li>
</ul>
<ul>
<li><strong>Location</strong>    包含了当前URL的信息</li>
<li><strong>Screen</strong> 包含了客户端显示屏的信息</li>
</ul>
</blockquote>
<h3 id="二、Window对象"><a href="#二、Window对象" class="headerlink" title="二、Window对象"></a>二、Window对象</h3><h4 id="1-window对象属性"><a href="#1-window对象属性" class="headerlink" title="1.window对象属性"></a>1.window对象属性</h4><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">innerHeight</td>
<td align="right">返回窗口的文档显示区的高度</td>
</tr>
<tr>
<td align="left">innerWidth</td>
<td align="right">返回窗口的文档显示区的宽度</td>
</tr>
</tbody></table>
<blockquote>
<ul>
<li>innerHeight 和 innerWidth 他返回的是你网页展示的区域的大小,即视口的区域大小（存在兼容性问题，IE8及其以下不兼容）</li>
<li><strong>document.documentElement.clientHeight</strong> 和 clientWidth 也是返回视口的尺寸（标准模式下任何浏览器都兼容）</li>
<li><strong>document.body.clientWidth/clientHeight</strong>（适用于怪异模式下的浏览器）该属性在标准模式下返回的是设置的body的实际宽高，只有在怪异模式下才会返回视口的大小。</li>
</ul>
</blockquote>
<hr>

<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">scrollTo</td>
<td align="right">设置滚动条移动的距离，参数一为X轴距，参数二维Y轴距</td>
</tr>
<tr>
<td align="left">scrollBy</td>
<td align="right">设置滚动条移动的距离，参数一为X轴距，参数二维Y轴距（在原有的基础上滚动）</td>
</tr>
</tbody></table>
<blockquote>
<ul>
<li>我们需要区分的是scrollTo(x,y)是每次将滚动条移动到（x，y）点</li>
<li>scrollBy(x,y)是在原有移动的基础上再次移动（原有x+x，原有y+y）的距离</li>
</ul>
</blockquote>
<hr>

<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">pageXOffset</td>
<td align="right">设置或返回当前页面相对于窗口显示区左上角的X位置。（IE8及以下不兼容）</td>
</tr>
<tr>
<td align="left">pageYOffset</td>
<td align="right">设置或返回当前页面相对于窗口显示区左上角的Y位置。</td>
</tr>
<tr>
<td align="left">scrollX</td>
<td align="right">设置返回滚动条移动的横向距离</td>
</tr>
<tr>
<td align="left">scrollY</td>
<td align="right">设置返回滚动条移动的纵向距离</td>
</tr>
</tbody></table>
<blockquote>
<ul>
<li><strong>pageXOffset 属性是 scrollX 属性的别名,为了跨浏览器兼容性，请使用 window.pageXOffset 代替 window.scrollX</strong>。</li>
<li><strong>window.pageXOffset == window.scrollX; // 总是 true</strong></li>
<li>该属性和scroll一样也是返回的是滚动条的距离，但是我们需要注意的是，虽然她和ScrollX一样都可以设置值，但是设置了值之后他并不会有效果，仅仅是设置了值<br>查看滚动条的距离还有两个方法，<strong>document.body/documentElement.scrollLeft/scrollTop</strong>,只是这两个方法存在兼容性混乱的问题，就是当document.body.scrollLeft可以返回横向滚动的距离时，那么document.documentElement.scrollleft就会返回0，因此我们在做兼容性写法的时候。常常将两个属性相加： x = document.body.scrollLeft + document.documentElement.scrollleft。</li>
</ul>
</blockquote>
<hr>

<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">parent</td>
<td align="right">返回子窗口的父窗口</td>
</tr>
<tr>
<td align="left">top</td>
<td align="right">返回该窗口的最顶级窗口</td>
</tr>
</tbody></table>
<blockquote>
<ul>
<li>当你使用<code>&lt;iframe src=&quot;./children.html&quot; frameborder=&quot;10&quot;&gt;&lt;/iframe&gt;</code>在网页中引入一个子网页的话，那么网页1就是子网页的父级网页</li>
<li>在这里我们需要注意一个问题，就是在全局环境下我们声明变量时，要尽量避免声明top，parent这些保留字，因为你在全局环境下声明，很可能操作的是window下的这样一个属性。</li>
</ul>
</blockquote>
<hr>

<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">screenX</td>
<td align="right">只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。</td>
</tr>
<tr>
<td align="left">screenY</td>
<td align="right"></td>
</tr>
<tr>
<td align="left">screenTop</td>
<td align="right"></td>
</tr>
<tr>
<td align="left">screenLeft</td>
<td align="right"></td>
</tr>
</tbody></table>
<blockquote>
<ul>
<li>IE、Safari、Chrome 和 Opera 支持 screenLeft<br>和 screenTop，而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY。</li>
</ul>
</blockquote>
<hr>
#### 2.window对象方法
| 方法          |                                                                                 作用 |
| :------------ | -----------------------------------------------------------------------------------: |
| setInterval   |                                          设置定时器 （每隔一段时间就会触发处理事件） |
| setTimeout    |                                              设置定时器 （延迟一段时间才会触发事件） |
| cleanInterval |                                                                           清除定时器 |
| cleanTimeout  |                                                                           清除定时器 |
| open          | 打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,features,replace) |
| close         |                                                                       关闭浏览器窗口 |
<hr>
### 三、Navigator对象
> Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的
名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
#### 1. navigator 对象属性

<table>
<thead>
<tr>
<th align="left">方法</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">online</td>
<td align="right">返回指明系统是否处于脱机模式（是否联网）的布尔值。常用来做离线缓存的判断条件</td>
</tr>
<tr>
<td align="left">cookieEnabled</td>
<td align="right">返回指明浏览器中是否启用 cookie 的布尔值。</td>
</tr>
<tr>
<td align="left">userAgent</td>
<td align="right">返回由客户机发送服务器的 user-agent 头部的值。</td>
</tr>
</tbody></table>
<blockquote>
<p>userAgent 返回的值：<br>“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36”<br>我们常用此值来做浏览器嗅探</p>
</blockquote>
<details>
  <summary><mark><font color="darkred">点击查看详细内容</font></mark></summary>
  <p> -浏览器嗅探代码</p>
  <pre><code>  
 // 
        var nVer = navigator.appVersion,
            nAgt = navigator.userAgent,
            browser = navigator.appName,
            version = '' + parseFloat(navigator.appVersion),
            majorVersion, nameOffset, verOffset, ix, network = 'unknown';
        // Opera
        if ((verOffset = nAgt.indexOf('Opera')) != -1) {
            browser = 'Opera';
            version = nAgt.substring(verOffset + 6);
            if ((verOffset = nAgt.indexOf('Version')) != -1) {
                version = nAgt.substring(verOffset + 8);
            }
        }
        // Opera Next
        if ((verOffset = nAgt.indexOf('OPR')) != -1) {
            browser = 'Opera';
            version = nAgt.substring(verOffset + 4);
        }
    // MSIE
        else if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
            browser = 'Microsoft Internet Explorer';
            version = nAgt.substring(verOffset + 5);
        }
    // Chrome
        else if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
            browser = 'Chrome';
            version = nAgt.substring(verOffset + 7);
        }
    // Safari
        else if ((verOffset = nAgt.indexOf('Safari')) != -1) {
            browser = 'Safari';
            version = nAgt.substring(verOffset + 7);
            if ((verOffset = nAgt.indexOf('Version')) != -1) {
                version = nAgt.substring(verOffset + 8);
            }
        }
    // Firefox
        else if ((verOffset = nAgt.indexOf('Firefox')) != -1) {
            browser = 'Firefox';
            version = nAgt.substring(verOffset + 8);
        }
    // MSIE 11+
        else if (nAgt.indexOf('Trident/') != -1) {
            browser = 'Microsoft Internet Explorer';
            version = nAgt.substring(nAgt.indexOf('rv:') + 3);
        }
    // WeiXin
        else if (nAgt.indexOf('NetType/') != -1) {
            browser = 'WeiXin';
            if (nAgt.indexOf('NetType/WIFI') != -1) {
                network = 'WIFI';
            }else if(nAgt.indexOf('NetType/2G') != -1) {
                network = '2G';
            }else if(nAgt.indexOf('NetType/3G+') != -1) {
                network = '3G+';
            }
            verOffset = nAgt.lastIndexOf('/')
            version = nAgt.substring(verOffset + 1);
            if (browser.toLowerCase() == browser.toUpperCase()) {
                browser = navigator.appName;
            }
        }
    // Other browsers
        else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
            browser = nAgt.substring(nameOffset, verOffset);
            version = nAgt.substring(verOffset + 1);
            if (browser.toLowerCase() == browser.toUpperCase()) {
                browser = navigator.appName;
            }
        }

<pre><code>// trim the version string
if ((ix = version.indexOf(&apos;;&apos;)) != -1) version = version.substring(0, ix);
if ((ix = version.indexOf(&apos; &apos;)) != -1) version = version.substring(0, ix);
if ((ix = version.indexOf(&apos;)&apos;)) != -1) version = version.substring(0, ix);
majorVersion = parseInt(&apos;&apos; + version, 10);
if (isNaN(majorVersion)) {
    version = &apos;&apos; + parseFloat(navigator.appVersion);
    majorVersion = parseInt(navigator.appVersion, 10);
}

// mobile version
var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);

// start system detect
var os = &apos;&apos;;
var clientStrings = [
    {s: &apos;Windows 10&apos;, r: /(Windows 10.0|Windows NT 10.0)/},
    {s: &apos;Windows 8.1&apos;, r: /(Windows 8.1|Windows NT 6.3)/},
    {s: &apos;Windows 8&apos;, r: /(Windows 8|Windows NT 6.2)/},
    {s: &apos;Windows 7&apos;, r: /(Windows 7|Windows NT 6.1)/},
    {s: &apos;Windows Vista&apos;, r: /Windows NT 6.0/},
    {s: &apos;Windows Server 2003&apos;, r: /Windows NT 5.2/},
    {s: &apos;Windows XP&apos;, r: /(Windows NT 5.1|Windows XP)/},
    {s: &apos;Windows 2000&apos;, r: /(Windows NT 5.0|Windows 2000)/},
    {s: &apos;Windows ME&apos;, r: /(Win 9x 4.90|Windows ME)/},
    {s: &apos;Windows 98&apos;, r: /(Windows 98|Win98)/},
    {s: &apos;Windows 95&apos;, r: /(Windows 95|Win95|Windows_95)/},
    {s: &apos;Windows NT 4.0&apos;, r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/},
    {s: &apos;Windows CE&apos;, r: /Windows CE/},
    {s: &apos;Windows 3.11&apos;, r: /Win16/},
    {s: &apos;Android&apos;, r: /Android/},
    {s: &apos;Open BSD&apos;, r: /OpenBSD/},
    {s: &apos;Sun OS&apos;, r: /SunOS/},
    {s: &apos;Linux&apos;, r: /(Linux|X11)/},
    {s: &apos;iOS&apos;, r: /(iPhone|iPad|iPod)/},
    {s: &apos;Mac OS X&apos;, r: /Mac OS X/},
    {s: &apos;Mac OS&apos;, r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/},
    {s: &apos;QNX&apos;, r: /QNX/},
    {s: &apos;UNIX&apos;, r: /UNIX/},
    {s: &apos;BeOS&apos;, r: /BeOS/},
    {s: &apos;OS/2&apos;, r: /OS\/2/},
    {s: &apos;Search Bot&apos;, r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/}
];
for (var id in clientStrings) {
    var cs = clientStrings[id];
    if (cs.r.test(nAgt)) {
        os = cs.s;
        break;
    }
}
var osVersion = &apos;&apos;;
if (/Windows/.test(os)) {
    osVersion = /Windows (.*)/.exec(os)[1];
    os = &apos;Windows&apos;;
}
switch (os) {
    case &apos;Mac OS X&apos;:
        osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];
        break;
    case &apos;Android&apos;:
        osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
        break;
    case &apos;iOS&apos;:
        osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
        osVersion = osVersion[1] + &apos;.&apos; + osVersion[2] + &apos;.&apos; + (osVersion[3] | 0);
        break;
}

//detect data
var params = {};
params.os = os;//操作系统
params.osVersion = osVersion ? osVersion : &apos;unknown&apos;;//操作系统版本
params.mobile = mobile;//是否移动端访问
params.browser = browser;//浏览器
params.browserVersion = version;//浏览器版本
params.browserMajorVersion = majorVersion;//浏览器major版本

//输出对象
console.log(params);</code></pre><p>  </p></code></pre><p></p>
</details>

<h3 id="四、History对象"><a href="#四、History对象" class="headerlink" title="四、History对象"></a>四、History对象</h3><h4 id="1-history对象属性"><a href="#1-history对象属性" class="headerlink" title="1.history对象属性"></a>1.history对象属性</h4><blockquote>
<p>History 对象包含用户（在浏览器窗口中）访问过的 URL</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">lenght</td>
<td align="right">返回浏览器历史列表中的URL数量</td>
</tr>
<tr>
<td align="left"><hr></td>
<td align="right"></td>
</tr>
<tr>
<td align="left">#### 2.history对象方法</td>
<td align="right"></td>
</tr>
<tr>
<td align="left">方法</td>
<td align="right">作用</td>
</tr>
<tr>
<td align="left">:———-</td>
<td align="right">———————————————————————————————:</td>
</tr>
<tr>
<td align="left">back（）</td>
<td align="right">加载 history 列表中的前一个 URL。</td>
</tr>
<tr>
<td align="left">forward（）</td>
<td align="right">加载 history 列表中的下一个 URL。。</td>
</tr>
<tr>
<td align="left">go（）</td>
<td align="right">加载 history 列表中的某个具体页面。参数为数值，正值为下N个页面，负为前N个页面，0是刷新当前页面</td>
</tr>
<tr>
<td align="left"><hr></td>
<td align="right"></td>
</tr>
<tr>
<td align="left">### 五、Location对象</td>
<td align="right"></td>
</tr>
</tbody></table>
<blockquote>
<p>Location 对象包含有关当前 URL 的信息。</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//域名 HTTPS使用端口443，HTTP使用的端口是80</span></span><br><span class="line">https:<span class="comment">//www.baidu.com</span></span><br><span class="line"><span class="comment">//路径</span></span><br><span class="line">/s</span><br><span class="line"><span class="comment">//参数</span></span><br><span class="line">?ie=utf<span class="number">-8</span>&amp;f=<span class="number">8</span>&amp;rsv_bp=<span class="number">1</span>&amp;tn=baidu&amp;wd=nba&amp;oq=markdown%<span class="number">25E6</span>%<span class="number">2580</span>%<span class="number">258</span>E%<span class="number">25E4</span>%<span class="number">25</span>B9%<span class="number">2588</span>%<span class="number">25E4</span>%<span class="number">25</span>BB%<span class="number">25</span>A3%<span class="number">25E7</span>%<span class="number">25</span>A0%<span class="number">2581</span>%<span class="number">25E6</span>%<span class="number">258</span>A%<span class="number">2598</span>%<span class="number">25E5</span>%<span class="number">258</span>F%<span class="number">25</span>A0&amp;rsv_pq=dbfa6388001a16eb&amp;rsv_t=<span class="number">562</span>bnZuR%<span class="number">2</span>FQ1DjrmRVjp4IQo5IExNhjytYVQD426aShEjDIB4Hkou1Y2hwzg&amp;rqlang=cn&amp;rsv_enter=<span class="number">1</span>&amp;rsv_sug3=<span class="number">3</span>&amp;rsv_sug1=<span class="number">2</span>&amp;rsv_sug7=<span class="number">100</span>&amp;rsv_sug2=<span class="number">0</span>&amp;rsv_dl=tb&amp;inputT=<span class="number">489</span>&amp;rsv_sug4=<span class="number">490</span></span><br><span class="line"><span class="comment">//锚点</span></span><br><span class="line">#1</span><br></pre></td></tr></table></figure>

<h4 id="1-Location对象属性"><a href="#1-Location对象属性" class="headerlink" title="1. Location对象属性"></a>1. Location对象属性</h4><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="right">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="left">hash</td>
<td align="right">设置或返回从井号 (#) 开始的 URL（锚）（可以用来做单页面）</td>
</tr>
<tr>
<td align="left">host</td>
<td align="right">设置或返回主机名的URL端口号</td>
</tr>
<tr>
<td align="left">href</td>
<td align="right">设置或返回完整的url地址</td>
</tr>
<tr>
<td align="left">pathname</td>
<td align="right">设置或返回当前url的路径部分</td>
</tr>
<tr>
<td align="left">protocol</td>
<td align="right">设置或返回当前 URL 的协议</td>
</tr>
<tr>
<td align="left">search</td>
<td align="right">设置或返回从问号 (?) 开始的 URL（查询部分）</td>
</tr>
<tr>
<td align="left">#### 2.Location 对象方法</td>
<td align="right"></td>
</tr>
<tr>
<td align="left">属性</td>
<td align="right">作用</td>
</tr>
<tr>
<td align="left">:————–</td>
<td align="right">————————————————————–:</td>
</tr>
<tr>
<td align="left">assign()</td>
<td align="right">加载新的文档。</td>
</tr>
<tr>
<td align="left">reload(‘force’)</td>
<td align="right">重新加载当前文档。参数可选，不填或填 false 则取浏览器缓存的文档</td>
</tr>
<tr>
<td align="left">replace()</td>
<td align="right">用新的文档替换当前文档。</td>
</tr>
</tbody></table>

        </div>
        
<blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    Last updated: <time datetime="2019-07-26T12:01:55.571Z" itemprop="dateUpdated">2019-07-26 20:01:55</time>
</span><br>


        
        转载注明出处，原文地址：<a href="/2019/07/26/BOM/" target="_blank" rel="external">http://liuqinghua0609.gitee.io/2019/07/26/BOM/</a>
        
    </div>
    <footer>
        <a href="http://liuqinghua0609.gitee.io">
            <img src="/img/avatar.jpg" alt="Liuqh">
            Liuqh
        </a>
    </footer>
</blockquote>

        
            <div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>

            
        
        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/BOM对象/">BOM对象</a></li></ul>

            <div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://liuqinghua0609.gitee.io/2019/07/26/BOM/&title=《BOM》 — Liuqh'blogs&pic=http://liuqinghua0609.gitee.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://liuqinghua0609.gitee.io/2019/07/26/BOM/&title=《BOM》 — Liuqh'blogs&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>

        </div>
        
            


        
    </div>
    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="prev">
      <a href="/2019/07/26/立即执行函数/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">立即执行函数</h4>
      </a>
    </div>
  

  
    <div class="next">
      <a href="/2019/07/21/函数式编程纯函数/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">纯函数和柯里化</h4>
      </a>
    </div>
  
</nav>


    
    
        <aside class="post-widget">
            <nav class="post-toc-wrap" id="post-toc">
                <strong>目录</strong>
                <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#一、BOM对象包含的内容"><span class="post-toc-number">1.</span> <span class="post-toc-text">一、BOM对象包含的内容</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#二、Window对象"><span class="post-toc-number">2.</span> <span class="post-toc-text">二、Window对象</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-window对象属性"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">1.window对象属性</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#四、History对象"><span class="post-toc-number">3.</span> <span class="post-toc-text">四、History对象</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-history对象属性"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">1.history对象属性</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-Location对象属性"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">1. Location对象属性</span></a></li></ol></li></ol>
            </nav>
            <div class="toc-bar"><div>
        </aside>
    
</article>

    <div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        我们一起来让这个世界有趣一点
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/img/reward-wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/img/reward-wechat.jpg" data-alipay="/img/reward-alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>

    

</div>

    </main>
    <footer class="footer ">
    
    <div class="bottom">
        <p>
            <span>
                Liuqh &copy; 2017 - 2019
            </span>
        		
           	
            
            
            <span>
	            Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/codefine/hexo-theme-mellow" target="_blank">mellow</a>
            </span>
            
            
            

            
                
<span class="site-uv" title="总访客量">
    <i class="icon icon-user"></i>
    <i class="busuanzi-value" id="busuanzi_value_site_uv"></i>
</span>


<span class="site-pv" title="总访问量">
    <i class="icon icon-eye"></i>
    <i class="busuanzi-value" id="busuanzi_value_site_pv"></i>
</span>

            
        </p>
    </div>
</footer>

    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://liuqinghua0609.gitee.io/2019/07/26/BOM/&title=《BOM》 — Liuqh'blogs&pic=http://liuqinghua0609.gitee.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://liuqinghua0609.gitee.io/2019/07/26/BOM/&title=《BOM》 — Liuqh'blogs&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>


    
    <!-- main-js -->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/fastclick.js?v=1.4.3"></script>
<script type="text/javascript" src="/js/plugins/ios-orientationchange-fix.js?v=1.4.3"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.js"></script>

<script type="text/javascript" src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>

<script type="text/javascript" src="/js/method.js?v=1.4.3"></script>
<script type="text/javascript" src="/js/blog.js?v=1.4.3"></script>

<!-- third-party -->






<script type="text/javascript" src="/js/plugins/local_search.js?v=1.4.3"></script>
<script type="text/javascript">
	var search_path = "search.xml";
	if (search_path.length === 0) {
		search_path = "search.xml";
	}
	var path = "/" + search_path;
	searchFunc(path, "local-search-input", "local-search-result");
</script>



<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



    
    





    <!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
            processEscapes: true,
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>







    
</body>
</html>
